<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">

    <!-- 样式文件 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/picker.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/userData.css" />

    <title>发布需求 - 孝邻会 </title>
</head>

<body>
    <!-- 内容区域 -->
    <div class="page">
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">发布需求</div>
                <div class="header-right">
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="page-bd" style="background-color: #ffffff;">
            <form id="userform">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" name="caseDesc" oninput="contentnum(this)" maxlength="200" placeholder="请输入具体描述让更多人看到" rows="4"></textarea>
                        <div class="weui-textarea-counter"><span id="length">0</span>/200</div>
                    </div>
                </div>

                <div class="uploading" style="display: block; ">
                    <div class="uploadBox" style="flex-wrap: wrap;overflow: initial;    display: flex;">
                        <ul class="weui-uploader__files uploaderFiles" id="uploaderFiles1">
                        </ul>
                        <div class="Box">
                            <img src="../../static/mobile/default/images/addImg.png" alt="" class="imgBox">
                            <input id="uploadInput" onchange="uploadFile(this,event)" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                        </div>
                        <input type="hidden" value="" name="casePic" class="fs28 color_3 fw_b inputbox casePic">
                        <div></div>
                    </div>
                </div>

                <!-- 页面内容-->
                <div class="cells">
                    <div class="cell">
                        <div class="cell_bd"><span class="fs28 color_9">联系电话</span></div>

                        <div class="cell_ft">
                            <input type="Number" class="fs28  color_3" placeholder="请输入" name="mobile" value="">
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell_bd">
                            <span class="fs28 color_9">预计金额</span></div>
                        <div class="cell_ft">
                            <input type="Number" class="fs28  color_3" placeholder="请输入" name="amount" value="">
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell_bd">
                            <span class="fs28  color_9">截止时间</span></div>
                        <div class="cell_ft">
                            <input type="text" value="" name="endTime" readonly class="fs28 color_3 fw_b" id="nowValue" placeholder="请选择 >">
                        </div>
                    </div>
                </div>

                <div class="weui-btn-area" style="margin: 0.4rem">
                    <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="postCase()">发布需求</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>

    <script src="../../static/mobile/default/js/datePicker.js"></script>
    <script src="../../static/mobile/default/js/picker.min.js"></script>

    <!-- 函数声明 -->
    <script>
        //==日期选择器
        function demoClick() {
            var nowValue = document.getElementById('nowValue');
            new DatePicker({
                "type": "3", //0年, 1年月, 2月日, 3年月日
                "title": '请选择日期', //标题(可选)
                "maxYear": "", //最大年份（可选）
                "minYear": "", //最小年份（可选）
                "separator": ".", //分割符(可选)
                "defaultValue": nowValue.value, //默认值（可选）
                "callBack": function(val) {
                    //回调函数（val为选中的日期）
                    nowValue.value = val;
                }
            });
        }

        //==计算数字
        function contentnum(obj) {
            var length = $(obj).val().length;
            $('#length').text(length)
        }

        //==选择上传图片
        function uploadFile(_this, e) {
            var formData = new FormData($("#uploadForma")[0]) //创建一个forData
            formData.append('file', $('#uploadInput')[0].files[0]) //把file添加进去  name命名为img
            $.ajax({
                url: 'https://mp.jianguoes.com/api/mp/upload',
                data: formData,
                type: "POST",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {

                    if (data.errno != 0) {
                        _alert(data.errmsg);
                        return false;

                    }
                    $('.casePic').val(data.data)
                        // imgNum++;
                        // fd.append("imgfile["+imgNum+"]", data.url);

                    $('#uploaderFiles1').before('<div class="Box"><img src="' + data.data + '" alt="" class="imgBox payimg"><img src="../../static/mobile/default/images/closeImg.png" alt=""  class="closeImg" onclick="closeImg(this)"></div>');
                    var test = $('.uploadBox .Box')
                    if ($('.uploadBox .Box').length > 2) {
                        $('.uploadBox .Box').eq(0).remove()
                    }

                },
                error: function() {
                    //失败
                }

            });

        }

        //==关闭图片
        function closeImg(obj) {
            // var id = $(obj).attr('data-id');
            $('.uploadBox .Box').eq(0).remove()
            $('.casePic').val('')
        }

        //==发布需求
        var num = 0;

        function postCase() {
            var mobile = $("input[name='mobile']").val();
            var endTime = $("input[name='endTime']").val();

            if (!mobile) {
                $.alert("请输入联系电话");
                return;
            }
            var reg = /(1[3-9]\d{9}$)/;
            if (!reg.test(mobile)) {
                $.alert("请输入正确格式手机号");
                return;
            }
            if (!endTime) {
                $.alert("请选择截止时间");
                return;
            }

            console.log(num);
            if (num == 1) {
                $.alert("请不要重复提交");
                return;
            }
            num = 1;

            var data = $('#userform').toJson();
            $.ajax({
                type: "post",
                url: "https://mp.jianguoes.com/api/res/postCase",
                contentType: "application/json",
                data: JSON.stringify(data),
                headers: {
                    token: $.cookie('code')
                },
                success: function(data) {
                    console.log(data)
                    if (data.errno != 0) {
                        $.alert(data.errmsg);
                        num = 0;
                        return;
                    }
                    window.location.href = 'index.html';
                },
                error: function() {
                    num = 0;
                },
            })
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            FastClick.attach(document.body);

            $('#nowValue').on('click', function() {
                demoClick()
            })
        });
    </script>
</body>

</html>